import React, { Component } from 'react'
import {IProduct} from '../types/product'
import {connect} from 'react-redux'

import {withRouter,RouteComponentProps} from 'react-router-dom'

/**
 * 组件分两种调用形式：1.路由直接调用  2.标签直接调用
 * 
*/
//切记：组件的props接口一定要继承路由props接口

//路由  Navlink 函数式调 history.push  路由表
//redux  仓库
//组件创建   组件传参  父-->子  子-->父
interface Iprops extends RouteComponentProps{
    item:IProduct,
    addPro:(target:IProduct) => void
}

class Product extends Component <Iprops>{
    render() {
        let {title,price,img} = this.props.item;
        return (
            <div className="p-item"> 
                <img src={img} alt="" onClick={this.goDetail}/>
                <h5>{title}</h5>
                <span>价格:{price}</span>
                <button onClick={() => {this.props.addPro(this.props.item)}}>+</button>
            </div>
        )
    }

    goDetail = () => {
        this.props.history.push('/detail/1')
    }
}

let stateMapToProps = () => {
    return {}
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        addPro(target:IProduct){
            dispatch({type:'ADD_PRO',target})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(withRouter(Product))